import {Component, ViewChild, ChangeDetectorRef} from "@angular/core";
import {ActivatedRoute} from "@angular/router";
import {KnowledgeService} from "./svr/knowledge.service";
declare let MathJax:any;

@Component({
  selector:"formula-editor",
  template:`
    <h3>
      {{knowledge?.knowledge}}
    </h3>
    <textarea [(ngModel)]="detail.content" (blur)="preview()"></textarea>
    <!--<button (click)="preview()">预览</button>-->
    <div id="preview" *ngIf="formulaRst">
      <div>{{formulaRst}}</div>
    </div>
    
    <div class="toolBar">
      <a (click)="add()">提交</a>
    </div>
  `,
  styles:[`
    :host{
      width:80vw;
      display:block;
      margin:0 auto;
    }
    textarea{
      border:1px solid blue;
      display:block;
      width:100%;
      box-sizing:border-box;
      margin:10px 0;
    }
    #preview{
      background-color:darkgreen;
      color:white;
      width:100%;
      padding:10px;
      margin-bottom:10px;
      box-sizing: border-box;
      line-height:2;
    }
  `]
})
export class FormulaEditorComponent{
  constructor(private cd:ChangeDetectorRef,private router:ActivatedRoute,private klsvr:KnowledgeService){
    router.params.subscribe(pars=>{
      if(pars["knowledge"]){
        this.klsvr.knowledge(pars['knowledge'])
          .then(res=>{
            this.knowledge=res;
            console.dir(this.knowledge)
          })
      }
    })
  }
  knowledge:any={};
  detail={
    content:"",
    flag:1,
    priority:2
  }
  formulaRst;
  add(){
    this.klsvr.addDetailForSubject(this.detail,this.knowledge.id);
  }
  preview(){
    this.formulaRst=null;
    this.cd.detectChanges();
    this.formulaRst=this.detail.content;
    this.cd.detectChanges();
    MathJax.Hub.Queue(["Typeset",MathJax.Hub])
  }
}
